<template>
	<view class="page">
		<view class="bus_info-wrap">
			<view class="top-dack"></view>
			<view class="bus_info tp-w690">
				<view class="info_top-wrap">
					<view class="date">发车时间：{{busInfo.fontDay || ''}} {{busInfo.week || ''}}</view>
					<!-- <view class="price">
						￥
						<text style="font-size: 34rpx;">28</text>
						<text style="font-size: 24rpx;">折扣</text>
					</view> -->
				</view>
				<view class="info_content-wrap">
					<view class="from">
						<text class="time">{{busInfo.startTime}}</text>
						<text class="address ellispsis2">{{startStation || busInfo.startStation}}</text>
					</view>
					<view class="bus_type-wrap">
						<text class="but_type">{{busInfo.shiftsCartype}}</text>
						<view class="dack"></view>
						<text class="duration">历时{{busInfo.travelTime || ''}}分钟</text>
					</view>
					<view class="to">
						<text class="time">{{busInfo.arriveTime}}</text>
						<text class="address ellispsis2">{{endStation || busInfo.arriveStation}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 乘车人信息S -->
		<view class="content-wrap tp-w690 chengcheren">
			<view class="rider_info-wrap">
				<view class="common_tit-wrap">
					<view class="l-wrap">乘车人信息</view>
					<view class="r-wrap"></view>
				</view>
				<!-- 历史记录S -->
				<view class="rider_list_history">
					<view class="rider_item_history" v-for="(it_r_h,in_r_h) in riderPersionListHistory" :key="in_r_h"
						@click="handleChooseHistoryRider(it_r_h)">{{it_r_h.passengerName}}</view>
				</view>
				<!-- 历史记录E -->
				<!-- 当前选择乘车人列表S -->
				<view class="rider_list">
					<view class="rider_item" v-for="(it_r,in_r) in riderPersionList" :key="in_r">
						<view class="l-wrap">
							<uni-icons type="trash" size="22" color="#ccc" @click="handleDelRider(it_r)"></uni-icons>
							<text class="name ellispsis1">{{it_r.passengerName}}</text>
							<text class="type">{{it_r.typeName}}</text>
							<text class="ID">{{it_r.certificateNumber}}</text>
						</view>
						<!-- <uni-icons @click="handleGoBusAddRider(it_r)" type="arrowright" size="22" color="#ccc"></uni-icons> -->
						<image @click="handleGoBusAddRider(it_r)" class="tp-img32"
							src="../../static/imgs/icons/edit-icon.png" mode=""></image>
					</view>
				</view>
				<!-- 当前选择乘车人列表E -->

				<view class="common-btn" @click="handleGoRiderList">
					<view class="common-btn-con">
						<uni-icons type="plus" size="20" color="#fff"></uni-icons>
						<text class="txt">添加乘车人</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 乘车人信息E -->

		<!-- 接送服务S -->
		<view v-if="goIsPickUp == 0" class="content-wrap tp-w690">
			<view class="rider_info-wrap">
				<view class="common_tit-wrap">
					<view class="l-wrap">接送服务</view>
					<view class="r-wrap"></view>
				</view>
				<view class="pickuper_list">
					<view class="pickuper_item" v-for="(it_p,in_p) in pickupPersonList" :key="in_p">
						<view class="t-wrap">
							<view class="name">{{it_p.passengerName}}</view>
							<uni-icons @click="handleDelPickuper(in_p)" type="trash" size="22" color="#999"></uni-icons>
						</view>
						<!-- <view class="b-wrap">
							<view class="address"><text style="color:#FFAF3C;">{{it_p.serviceType==='in'?'接站':'送站'}}：</text>{{it_p.destination}}</view>
							<uni-icons @click="handleGoBusAddPickuperDetail(it_p,in_p)" type="arrowright" size="22" color="#999"></uni-icons>
						</view> -->
						<view class="b-wrap level_align flex_between" @click="handleGoBusAddPickuperDetail(it_p,in_p)">
							<view class="flex flex_column">
								<view class="address" v-if="it_p.in.destination"><text
										style="color:#FFAF3C;">接站：</text>{{it_p.in.destination}}</view>
								<view class="address" v-if="it_p.out.destination"><text
										style="color:#FFAF3C;">送站：</text>{{it_p.out.destination}}</view>
							</view>
							<uni-icons type="arrowright" size="22" color="#999"></uni-icons>
						</view>
					</view>
				</view>
				<view class="common-btn" @click="handleGoAddPickuper">
					<view class="common-btn-con">
						<uni-icons type="plus" size="20" color="#fff"></uni-icons>
						<text class="txt">选择接送地点</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 接送服务E -->
		<view class="common-wrap tp-w690">
			<view class="input-wrap">
				<view class="type">意向司机</view>
				<view class="input" @click="handleGoDriverList">
					<input type="text" disabled :value="curDriverObj.name" placeholder="请选择" />
					<uni-icons type="arrowright" size="20" color="#999"></uni-icons>
				</view>
			</view>
		</view>

		<view class="common-wrap tp-w690 meiyouPhone" :class="NoPhone? 'InputFocus': ''">
			<view class="input-wrap">
				<view class="type">通知短信发送电话</view>
				<view class="input">
					<input type="number" :focus="NoPhone" v-model="phone" @blur="NoPhone = false"
						placeholder="用于接收取票信息" />
				</view>
			</view>
		</view>

		<view v-if="goIsCheckSeat == 0" class="common-wrap tp-w690 meiyouSeat">
			<view class="input-wrap">
				<view class="type">选座服务</view>
				<view class="input" @click="handleGoSeatList">
					<input type="text" disabled :value="choosedSeatListStr" placeholder="请选择座位" />
					<uni-icons type="arrowright" size="20" color="#999"></uni-icons>
				</view>
			</view>
		</view>
		<view class="common-wrap tp-w690 flex tp-fz30" style="padding: 30rpx;" v-if="textareaShow">
			<text class="tp-fc333">备注：</text>
			<textarea v-show="isTijiao" class="tp-fc999 tp-ptb0lr20 flex-1" value="" v-model="remark"
				placeholder="例如 行李数量大小、是否携带儿童及儿童信息登记等" />
			<!-- <text class="tp-fc999"></text> -->
		</view>

		<view class="common-wrap tp-w690">
			<view class="input-wrap" v-for="(it_i, in_i) in insuranceList" :key="in_i"
				@click="handleChooseInsurance(it_i, in_i)">
				<view class="l-wrap">
					<view v-if="!it_i.choosed" class="icon">
						<image src="../../static/imgs/icons/choose0-icon.png" mode="aspectFill"></image>
					</view>
					<view v-else class="icon">
						<image src="../../static/imgs/icons/choose1-icon.png" mode="aspectFill"></image>
					</view>
					<view>购买保险<text class="terms" @click.stop="handleGoInsuranceDetail(it_i)">《{{it_i.name}}》</text>
					</view>
				</view>
				<view class="price">￥{{it_i.price}}</view>
			</view>
			<!-- 特殊服务 -->
			<view class="input-wrap" v-for="(it_s, in_s) in serviceList" :key="in_s"
				@click="handleChooseService(it_s, in_s)">
				<view class="l-wrap">
					<view v-if="!it_s.choosed" class="icon">
						<image src="../../static/imgs/icons/choose0-icon.png" mode="aspectFill"></image>
					</view>
					<view v-else class="icon">
						<image src="../../static/imgs/icons/choose1-icon.png" mode="aspectFill"></image>
					</view>
					<view>附加服务<text class="terms" @click.stop="handleGoInsuranceDetail(it_s,3)">《{{it_s.name}}》</text>
					</view>
					<!-- <view>{{it_s.name}}</view> -->
				</view>
				<view class="price">￥{{it_s.price}}</view>
			</view>
			<!-- <view class="level_align tp-h88 tp-lh88 tp-fz26" @click="isFp = isFp == 1 ? 0 : 1">
				<image v-if="isFp == 1" class="tp-img32 tp-mr20" src="../../static/imgs/icons/choose0-icon.png"
					mode="aspectFill"></image>
				<image v-else class="tp-img32 tp-mr20" src="../../static/imgs/icons/choose1-icon.png" mode="aspectFill">
				</image>
				<view>是否开具发票</view>
			</view> -->
		</view>

		<view v-if="isUseCoupon == 0" class="common-wrap tp-w690">
			<view class="input-wrap" @click="handleGoBusCouponList">
				<view class="type">优惠券</view>
				<view class="input">
					<input disabled type="text"
						:value="choosedBusCoupon.id ? (choosedBusCoupon.useScene ==1 ? `满${choosedBusCoupon.fullAmount}减${choosedBusCoupon.amount}` : `减${choosedBusCoupon.amount}`) : ''"
						:placeholder="integralPlacholde" />
					<uni-icons type="arrowright" size="20" color="#999"></uni-icons>
				</view>
			</view>
			<!-- <view class="input-wrap">
				<view class="type">积分抵扣</view>
				<view class="input">
					<input type="number" :disabled="integral==0" v-model="usedIntegral" :placeholder="`最多可用${integral}积分`" @input="handleWatchUseIntegral" />
				</view>
			</view> -->
		</view>

		<view class="buy_description tp-w690" @click="handleChooseBuyDescription">
			<view v-if="!buyDescriptionStatus" class="icon">
				<image src="../../static/imgs/icons/choose0-icon.png" mode="aspectFill"></image>
			</view>
			<view v-else class="icon">
				<image src="../../static/imgs/icons/choose1-icon.png" mode="aspectFill"></image>
			</view>
			<view>
				请您仔细阅读
				<text class="terms">《乘车须知》</text>
				<!-- @click.stop="handleGoInsuranceDetail(it_n, 2)" -->
			</view>
		</view>

		<view class="submit-btn">
			<view class="price-wrap">
				<text>总价：</text>
				<text class="price">￥{{totalMoney || 0}}</text>
			</view>
			<view class="r-wrap">
				<view class="detail-btn" @click="handleShowPriceDetail">
					<text>明细</text>
					<uni-icons class="arrow-icon" type="arrowdown" size="20" color="#999"></uni-icons>
				</view>
				<view class="btn" @click="handleSubmitOrder">提交订单</view>
			</view>
		</view>

		<view class="popup-wrap">
			<uni-popup ref="priceDetail" type="bottom">
				<view class="popop_content">
					<view class="ul">
						<!-- 成人列表 -->
						<view class="li" v-if="riderPersionListMan.length">
							<view class="">
								<text class="tp-mr20">车票</text>
								<text>{{riderPersionListMan[0].typeName}}</text>
							</view>

							<view class="r-wrap">
								<text class="price">￥{{busInfo.linePrice * riderPersionListMan[0].rate/100}}</text>
								<text class="num">X{{riderPersionListMan.length}}人</text>
							</view>
						</view>
						<!-- 儿童列表 -->
						<view class="li" v-if="riderPersionListChild.length">
							<view class="">
								<text class="tp-mr20">车票</text>
								<text>{{riderPersionListChild[0].typeName}}</text>
							</view>

							<view class="r-wrap">
								<text class="price">￥{{busInfo.linePrice * riderPersionListChild[0].rate/100}}</text>
								<text class="num">X{{riderPersionListChild.length}}人</text>
							</view>
						</view>
						<!-- 老人列表 -->
						<view class="li" v-if="riderPersionListOld.length">
							<view class="">
								<text class="tp-mr20">车票</text>
								<text>{{riderPersionListOld[0].typeName}}</text>
							</view>

							<view class="r-wrap">
								<text class="price">￥{{busInfo.linePrice * riderPersionListOld[0].rate/100}}</text>
								<text class="num">X{{riderPersionListOld.length}}人</text>
							</view>
						</view>
						<!-- 保险明细 -->
						<view class="li" v-for="(it_i, in_i) in insuranceList" :key="in_i" v-if="it_i.choosed">
							<text>{{it_i.name}}</text>
							<view class="r-wrap">
								<text class="price">￥{{it_i.price}}</text>
								<text class="num">X{{riderPersionList.length}}人</text>
							</view>
						</view>
						<!-- 服务明细 -->
						<view class="li" v-for="(it_s, in_s) in serviceList" :key="in_s" v-if="it_s.choosed">
							<text>{{it_s.name}}</text>
							<view class="r-wrap">
								<text class="price">￥{{it_s.price}}</text>
								<text class="num">X{{riderPersionList.length}}人</text>
							</view>
						</view>
						<view class="li" v-if="choosedBusCoupon.amount && isUseCoupon == 0">
							<text>优惠券</text>
							<view class="r-wrap">
								<text class="price" style="color:#FF4A37">-￥{{choosedBusCoupon.amount}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="submit-btn">
					<view class="price-wrap">
						<text>总价：</text>
						<text class="price">￥{{totalMoney}}</text>
					</view>
					<view class="r-wrap">
						<view class="detail-btn" @click="handleShowPriceDetail('close')">
							<text>明细</text>
							<uni-icons class="arrow-icon" type="arrowup" size="20" color="#999"></uni-icons>
						</view>
						<view class="btn" @click="handleSubmitOrder">提交订单</view>
					</view>
				</view>
			</uni-popup>
		</view>

		<!-- 去完善航班信息 -->
		<uni-popup ref="modalBox" :maskClick="false" type="center">
			<view class="modal_box-wrap">
				<view class="alert-icon">
					<image src="../../static/imgs/icons/tabbar/home1-icon.png" mode=""></image>
				</view>
				<view class="p">为了您的行程顺利，请补全航班信息</view>
				<view class="btns-wrap">
					<view class="btn cancel" @click="hide">取消</view>
					<view class="btn confirm" @click="handleConfirm">确定</view>
				</view>
				<uni-icons @click="hide" class="close-icon" type="close" size="30" color="#999"></uni-icons>
			</view>
		</uni-popup>




		<CommonPay ref="commonPay" :price="totalMoney" :orderInfo="orderInfo" @payMoney="payMoney" @cancle="noPay"
			@closeK="noPay" @wechatPaySuccess="wechatPaySuccess"></CommonPay>

		<CommonTip ref="tip" :config="tipConfig" :orderInfo="orderInfo" @confirm="handleGoBusAddPickuper"></CommonTip>

		<Notice ref="notice" :noticeInfo="noticeInfo" :isbtn="buyDescriptionStatus"
			@NoticeOk="buyDescriptionStatus = true" @close="textareaShow = true"></Notice>

	</view>
</template>

<script>
	import CommonPay from '@/components/common/common-pay.vue'
	import CommonTip from '@/components/common/common-tip.vue'
	import Notice from '@/components/common/notice.vue'
	import $DB from '@/utils/debounce.js'
	export default {
		components: {
			CommonTip,
			CommonPay,
			Notice
		},
		data() {
			return {
				busInfo: {},
				pickupPersonList: [], // 当前接送人列表
				riderPersionListHistory: [],
				curRiderPersonInfo: {}, // 当前所选择的乘客信息
				curDriverObj: {}, // 当前所选意向司机
				choosedSeatList: [], // 当前所选座位列表
				buyDescriptionStatus: false, // 购买须知
				tipConfig: {
					content: '请先补全乘车人信息再进行购买车牌',
					btnText: '确定',
					tit: '温馨提示'
				},
				serviceList: [], //服务列表
				insuranceList: [], //保险列表
				noticeList: [], // 须知列表
				noticeInfo: {}, // 须知信息
				isUseCoupon: 0, // 该订单是否使用优惠券
				choosedBusCoupon: {},
				integral: 0, // 个人总积分
				usedIntegral: '', // 使用的积分
				exchangeRate: '', // 积分兑换汇率
				seatTotalNum: 0, // 总座位
				couponList: [], // 班车优惠券列表
				orderNo: '', // 订单id
				phone: '', // 联系电话
				remark: '', // 备注
				isFp: 1, // 	是否需要发票 0.是 1.否

				goIsCheckSeat: '0', // 去程可选座, 0.可 1.不可
				goIsPickUp: '0', // 去程可接送 0.可 1.不可
				// backIsCheckSeat: '0', // 返程可选座, 0.可 1.不可
				// backIsPickUp: '0', // 返程可接送  0.可 1.不可
				goPickUpTypeStart: '-1', // 去程出发站接送类型 -1.无接送 0.接站
				goPickUpTypeEnd: '-1', // 	去程终点站接送类型 -1.无接送 1.送站
				isTijiao: true, // 是否是提交状态 让备注框显示隐藏

				NoPhone: false, // 手机号的聚焦
				textareaShow: true, // 文本框显示隐藏
			};
		},
		onLoad(opt) {
			console.log(opt.busInfo);
			this.busInfo = opt && opt.busInfo && JSON.parse(opt.busInfo)
			if (opt.inviteCode) {
				this.$store.commit('upInviteCode', opt.inviteCode)
				this.busInfo = opt.busInfo && JSON.parse(opt.busInfo)
				let newDate = this.getNewDate(this.busInfo.startDay, this.busInfo.startTime)

				if (!newDate) {
					setTimeout(() => {
						uni.showToast({
							title: '当前班次已发车',
							icon: 'none'
						})
					})
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/tabbar/home'
						});
					})

				}
			}

			// console.log(this.busInfo);
			this.initRiderList()
			this.initChoosedBusCoupon()
			this.getServiceList() // 订单页面保险,服务等列表展示 

			// this.getBusCouponList()	// 公用优惠券选择列表
		},
		onShow() {
			if (this.$refs.tip) {
				this.$refs.tip.hide()
			}
			this.getRiderHistoryList()
			this.getPickuperList()
			this.getCurDriverObj()
			this.getChoosedSeatList()
			this.getChoosedBusCoupon()
		},
		computed: {
			riderPersionListMan() {
				let arr = []
				this.riderPersionList.forEach(item => {
					if (item.typeName === '成人') {
						arr.push(item)
					}
				})
				return arr
			},
			riderPersionListChild() {
				let arr = []
				this.riderPersionList.forEach(item => {
					if (item.typeName === '儿童') {
						arr.push(item)
					}
				})
				return arr
			},
			riderPersionListOld() {
				let arr = []
				this.riderPersionList.forEach(item => {
					if (item.typeName === '老人') {
						arr.push(item)
					}
				})
				return arr
			},
			choosedSeatListStr() {
				let str = ''
				if (this.choosedSeatList.length) {
					str = this.choosedSeatList.join('、') + '座'
				}
				return str
			},
			startStation() {
				let str = this.busInfo.startStation && this.busInfo.startStation.split('-')[1]
				return str
			},
			endStation() {
				let str = this.busInfo.arriveStation && this.busInfo.arriveStation.split('-')[1]
				return str
			},
			// 优惠前的价格
			originalPrice() {
				const usedIntegral = this.usedIntegral || 0
				let money = -usedIntegral * this.exchangeRate
				let personNum = this.riderPersionList.length
				let goPrice = this.busInfo.linePrice || 1
				this.riderPersionList.forEach(per => {
					money += per.rate * goPrice
				})
				this.serviceList.forEach(item => {
					if (item.choosed) {
						money += Number(item.price) * personNum * 100
					}
				})
				this.insuranceList.forEach(item => {
					if (item.choosed) {
						money += Number(item.price) * personNum * 100
					}
				})
				return money / 100 >= 0 ? money / 100 : 0
			},
			totalMoney() {
				const usedIntegral = this.usedIntegral || 0
				let money = -usedIntegral * this.exchangeRate
				let personNum = this.riderPersionList.length
				let goPrice = this.busInfo.linePrice || 1
				this.riderPersionList.forEach(per => {
					money += per.rate * goPrice
				})
				this.serviceList.forEach(item => {
					if (item.choosed) {
						money += Number(item.price) * personNum * 100
					}
				})
				this.insuranceList.forEach(item => {
					if (item.choosed) {
						money += Number(item.price) * personNum * 100
					}
				})

				let {
					fullAmount,
					amount
				} = this.choosedBusCoupon
				if (this.choosedBusCoupon.useScene == 1) { // 判断是否属于满减
					if (money >= Number(fullAmount) * 100) {
						money = money - Number(amount) * 100
					}
				} else if (this.choosedBusCoupon.useScene == 0) {
					money = money - Number(amount) * 100
				}

				return money / 100 >= 0 ? money / 100 : 0
			},
			integralPlacholde() { // 积分选择提示
				return this.couponList.length === 0 || this.totalMoney === 0 ? '暂无优惠券可用' : '点我选择优惠券'
			},
			riderPersionList() {
				return this.$store.getters.getRiderList
			},
			orderInfo() {
				let o = {
					orderNo: this.orderNo,
					type: 1
				}
				return o
			}
		},
		watch: {
			totalMoney() {
				if (this.isUseCoupon == 0) {
					this.getBusCouponList()
				}
				if (this.riderPersionList.length == 0) {
					this.couponList = []
					this.choosedBusCoupon = {}
				}
			},
			originalPrice() {
				this.getBusCouponList()
			}
		},
		methods: {
			wechatPaySuccess() {
				this.$refs.commonPay.close()
				uni.showToast({
					title: '支付成功'
				})
				uni.redirectTo({
					url: './success.order?id=' + this.orderNo + '&type=bus&toAndFor=false'
				});
			},
			// 获取当前时间 用作校验
			getNewDate(day, time) {
				const date = new Date()
				let newDate = ''
				let size = true
				let y = date.getFullYear(); //获取完整的年份(4位)
				let m = date.getMonth(); //获取当前月份(0-11,0代表1月)
				let d = date.getDate(); //获取当前日(1-31)
				let h = date.getHours(); //获取当前小时数(0-23)
				let f = date.getMinutes(); //获取当前分钟数(0-59)
				if (Number(m + 1) < 10) {
					m = '0' + Number(m + 1)
				}
				if (Number(d) < 10) {
					d = '0' + d
				}
				if (Number(h + 1) < 10) {
					h = '0' + Number(h + 1)
				}
				if (Number(f + 1) < 10) {
					f = '0' + Number(f + 1)
				}
				let valDay = y + '-' + (m) + '-' + d
				let timeArr = time.split(':')
				if (day == valDay) {
					if (timeArr[0] == h) {
						if (timeArr[1] == f || Number(timeArr[1]) < Number(f)) {
							size = false
						}
					} else if (Number(timeArr[0]) < Number(h)) {
						size = false
					}
				}
				// newDate = (m) + '月' + d + '日 ' + h + ':' + f
				return size
			},
			handleGoBusAddRider(item) {
				uni.navigateTo({
					url: '../../pagesTravel/bus.addRider?id=' + item.id + '&scene=0&shiftsId=' + this.busInfo
						.shiftsId + '&goType=' + this.busInfo.goType + '&backType=' + this.busInfo.backType
				});
				this.hide()
			},
			handleChangeCheckbox(e) {
				console.log(e);
			},
			handleChooseInsurance(item, i) {
				item.choosed = !item.choosed
				this.$set(this.insuranceList, i, item)
			},
			handleChooseService(item, i) { // 点击选择购买服务
				item.choosed = !item.choosed
				this.$set(this.serviceList, i, item)
			},
			// 点击乘车须知
			handleChooseBuyDescription() {
				this.$http.get(this.$api.orderText, {
					type: 3,
				}).then(res => {
					if (res.code === 200) {
						this.textareaShow = false
						this.noticeInfo = res.data.list[0]
						this.$refs.notice.show()
					}
				})
			},
			// 跳转到保险详情
			handleGoInsuranceDetail(item, type) {
				let obj = {
					type: 1,
					id: item.id,
					title: item.name || item.title
				}
				if (type) {
					obj.type = type
				}
				uni.navigateTo({
					url: '../../pagesTravel/serviceDetail?info=' + JSON.stringify(obj),
				});
			},
			handleShowPriceDetail(s) {
				if (s === 'close') {
					this.$refs.priceDetail.close()
					this.textareaShow = true
				} else {
					this.$refs.priceDetail.open()
					this.textareaShow = false
				}
			},
			// 去意向司机
			handleGoDriverList() {
				uni.navigateTo({
					url: '../../pagesTravel/driverList?type=0&curDriverId=' + this.curDriverObj.id + '&shopId=' +
						this.busInfo.shopId
				});
			},
			//选择乘车人tag
			handleChooseHistoryRider(item) {

				// 判断当前信息是否完整（比如需要填写航班信息，）
				this.$http.get(this.$api.checkRiderInfo + '?id=' + item.id + '&scene=0&schedulingId=' + this.busInfo
					.schedulingId + '&pnumber=' + (this.riderPersionList.length + 1)).then(res => {
					if (res.code === 2020) { // 判断当前所选乘客信息是否完整 （2020不完整|200完整）
						this.curRiderPersonInfo = item
						this.$refs.tip.show()
						// return
					} else if (res.code == 200) {
						let arr = []
						this.riderPersionList.forEach((it_, in_) => {
							arr.push(it_.id)
						})
						// 如果是机场航班去完善信息
						if (((this.busInfo.goType == 0) || (this.busInfo.backType == 0)) && this.riderPersionList
							.length == 0) {
							this.curRiderPersonInfo = item
							this.$refs.modalBox.open()
						} else if (((this.busInfo.goType == 0) || (this.busInfo.backType == 0)) && !arr.includes(
								item.id)) {
							this.curRiderPersonInfo = item
							this.$refs.modalBox.open()
						}
						if (this.riderPersionList.length === 0) {
							this.$store.commit('upRiderList', item)
							return false
						}
						// let arr = []
						// this.riderPersionList.forEach((it_, in_) => {
						// 	arr.push(it_.id)
						// })

						if (!arr.includes(item.id)) {
							this.$store.commit('upRiderList', item)
						}


					}
				})

			},
			handleDelRider(item) {
				this.riderPersionList.forEach((it_, in_) => {
					if (item.id === it_.id) {
						this.$store.commit('delRiderList', in_)
					}
				})
				if (this.pickupPersonList.length) {
					this.pickupPersonList.forEach((it_p, in_p) => {
						if (item.id === it_p.id) {
							this.handleDelPickuper(in_p)
						}
					})
				}
			},
			// 跳转去补全乘客信息
			handleGoBusAddPickuper() {
				uni.navigateTo({
					url: '../../pagesTravel/bus.addRider?id=' + this.curRiderPersonInfo.id + '&scene=0&shiftsId=' +
						this.busInfo.shiftsId + '&goType=' + this.busInfo.goType + '&backType=' + this.busInfo
						.backType
				});
			},
			// 添加乘车人
			handleGoRiderList() {
				uni.navigateTo({
					url: '../../pagesTravel/riderList?isBus=1&scene=0&shiftsId=' + this.busInfo.shiftsId +
						'&goType=' + this.busInfo.goType + '&backType=' + this.busInfo.backType
				});
			},
			// 选择接送地点
			handleGoAddPickuper() {
				// #ifdef H5
				return uni.showToast({
					title: 'H5端用户，需电话询问地址',
					icon: 'none'
				})
				// #endif
				let arr_rider = JSON.parse(JSON.stringify(this.$store.getters.getRiderList))
				let arr_pickuper = this.pickupPersonList
				let arr_r = []
				let arr_p = []
				arr_rider.forEach(item => { // 乘车人的id集合
					arr_r.push(item.id)
				})
				arr_pickuper.forEach(item => { // 接送人的id集合
					arr_p.push(item.id)
				})
				arr_r.forEach((it_r, in_r) => {
					arr_p.forEach((it_p, in_p) => {
						if (it_r === it_p) { // 删除已经添加的接送人，判断是否跳转到接送人列表
							arr_rider.splice(in_r, 1)
						}
					})
				})

				if (!arr_rider.length) {
					return uni.showToast({
						title: '请先添加乘车人',
						icon: 'none'
					})
				}
				let obj = {
					schedulingId: this.busInfo.schedulingId,
					lineId: this.busInfo.lineId,
					startTime: this.busInfo.startDay + ' ' + this.busInfo.startTime + ':00',
					travelTime: this.busInfo.travelTime,
				}
				uni.navigateTo({
					url: '../../pagesTravel/bus.addPickuper?goIsPickUp=' + this.goIsPickUp +
						'&goPickUpTypeStart=' + this.goPickUpTypeStart + '&goPickUpTypeEnd=' + this
						.goPickUpTypeEnd + '&busInfo=' + JSON.stringify(obj)
				});
			},
			handleDelPickuper(i) { // 删除已添加的接送人
				this.$store.commit('delPickuperList', i)
				this.getPickuperList()
			},
			handleGoBusAddPickuperDetail(item, index) { // 去修改接送人信息
				// this.$store.commit('delPickuperList',index)
				// this.$store.commit('delCurPickuperInfo',index)
				let obj = {
					schedulingId: this.busInfo.schedulingId,
					lineId: this.busInfo.lineId
				}
				uni.navigateTo({
					url: '../../pagesTravel/bus.addPickuper?goIsPickUp=' + this.goIsPickUp +
						'&goPickUpTypeStart=' + this.goPickUpTypeStart + '&goPickUpTypeEnd=' + this
						.goPickUpTypeEnd + '&id=' + item.id + '&busInfo=' + JSON.stringify(obj)
				});
			},
			handleGoBusCouponList() { //跳转到班车优惠券列表
				if (!this.couponList.length) return
				if (this.originalPrice === 0) return
				const couponInfo = JSON.stringify({
					type: 1,
					totalPrice: this.originalPrice,
					shopId: this.busInfo.shopId
				})
				uni.navigateTo({
					url: '../../pagesTravel/bus.couponList?couponInfo=' + couponInfo
				});
			},
			handleGoSeatList() { // 去选座位
				if (this.riderPersionList.length === 0) {
					return uni.showToast({
						title: '请先添加乘车人',
						icon: 'none'
					})
				}
				let obj = {
					schedulingId: this.busInfo.schedulingId,
					lineId: this.busInfo.lineId
				}
				uni.navigateTo({
					url: '../../pagesTravel/seatList?choosedSeatList=' + JSON.stringify(this.choosedSeatList) +
						'&busInfo=' + JSON.stringify(
							obj)
				});
			},
			handleWatchUseIntegral(e) { // 监听用户输入的积分
				// console.log(e.detail.value > this.integral);
				if (e.detail.value > this.integral) {
					setTimeout(() => {
						this.usedIntegral = this.integral
					}, 100)
				}
			},

			scrollTo(el) {
				uni.createSelectorQuery().select(el).boundingClientRect(data => { //目标节点
					// uni.createSelectorQuery().select(".search-address-list").boundingClientRect((res) => { //最外层盒子节点
					uni.pageScrollTo({
						duration: 0, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
						scrollTop: data.top, //滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离
					})
					// }).exec()
				}).exec();
			},
			handleSubmitOrder() { // 提交订单 弹出选择支付方式
				let newDate = this.getNewDate(this.busInfo.startDay, this.busInfo.startTime)
				if (!newDate) {
					setTimeout(() => {
						uni.showToast({
							title: '当前班次已发车',
							icon: 'none'
						})
					})
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/tabbar/home'
						});
					})

				}
				let regexPhone = this.$regexPhone
				if (!this.buyDescriptionStatus) {
					this.scrollTo('.buy_description')
					return uni.showToast({
						title: '请仔细阅读并确认《乘车须知》',
						icon: 'none'
					})
				}
				if (!this.riderPersionList.length) {
					this.scrollTo('.chengcheren')
					return uni.showToast({
						title: '请选择乘乘车人',
						icon: 'none'
					})
				}
				if (!this.phone.trim()) {
					this.scrollTo('.meiyouPhone')
					this.NoPhone = true
					return uni.showToast({
						title: '请检查输入手机号',
						icon: 'none'
					});
				}
				// if (!regexPhone.test(this.phone.trim())) return uni.showToast({
				// 	title: '请检查输入手机号',
				// 	icon: 'none'
				// });
				if (this.riderPersionList.length > this.choosedSeatList.length && this.goIsCheckSeat == 0) {
					this.scrollTo('.meiyouSeat')
					return uni.showToast({
						title: `您还有${this.riderPersionList.length - this.choosedSeatList.length}个座位位置待选`,
						icon: 'none'
					})
				}
				if (this.riderPersionList.length < this.choosedSeatList.length && this.goIsCheckSeat == 0) {
					this.scrollTo('.meiyouSeat')
					return uni.showToast({
						title: `请检查您的所选座位`,
						icon: 'none'
					})
				}

				const {
					startStation,
					shiftsId,
					schedulingId,
					arriveStation,
					startTime,
					arriveTime,
					licenseNumber,
					travelTime,
					startDay,
					shopId
				} = this.busInfo

				/* **************保险ids S****************** */
				let insuranceId_arr = []
				let insuranceId_str = ''
				this.insuranceList.forEach(item => {
					if (item.choosed) {
						insuranceId_arr.push(item.id)
					}
				})
				insuranceId_str = insuranceId_arr.join()
				/* **************保险ids E****************** */

				/* **************服务ids S****************** */
				let serviceId_arr = []
				let serviceId_str = ''
				this.serviceList.forEach(item => {
					if (item.choosed) {
						serviceId_arr.push(item.id)
					}
				})
				serviceId_str = serviceId_arr.join()
				/* **************服务ids E****************** */

				/* **************乘客ids S****************** */
				let riderId_arr = []
				let riderId_str = ''
				this.riderPersionList.forEach(item => {
					riderId_arr.push(item.id)
				})
				riderId_str = riderId_arr.join()
				/* **************乘客ids E****************** */

				/* **************单程接送人列表 S****************** */
				this.pickupPersonList.map(item => {
					item.passageId = item.id
					item.passageType = item.type
					item.passageNumber = item.idNumber
				})
				let pickupList = []
				this.pickupPersonList.forEach(item => {
					if (item.in && item.in.destination) {
						pickupList.push({
							transferType: 0, // 接送类型
							schedulingId: this.busInfo.schedulingId, // 班次时间查询id
							passengerId: item.id, // 乘车人id

							stationName: item.in.destinationObj.stationName || item.in
								.destinationObj.address, // 站点名称
							lat: item.in.destinationObj.lat || item.in.destinationObj.location
							.lat, // 纬度
							lng: item.in.destinationObj.lng || item.in.destinationObj.location
							.lng, // 经度
							address: item.in.destinationObj.addressName || item.in.destinationObj
								.address, // 站点地址
							addressId: item.in.destinationObj.id, // 站点地址id
							transferTime: item.in.waitingTime || '',
							lineId: this.busInfo.lineId, // 线路ID

							shiftsId: this.busInfo.shiftsId, // 班次id

						})
					}
					if (item.out && item.out.destination) {
						pickupList.push({
							transferType: 1, // 接送类型
							schedulingId: this.busInfo.schedulingId, // 班次时间查询id
							passengerId: item.id, // 乘车人id

							stationName: item.out.destinationObj.stationName || item.out
								.destinationObj.address, // 站点名称
							lat: item.out.destinationObj.lat || item.out.destinationObj.location
								.lat, // 纬度
							lng: item.out.destinationObj.lng || item.out.destinationObj.location
								.lng, // 经度
							address: item.out.destinationObj.addressName || item.out.destinationObj
								.address, // 站点地址
							addressId: item.out.destinationObj.id, // 站点地址id
							transferTime: item.out.waitingTime || '',
							lineId: this.busInfo.lineId, // 线路ID

							shiftsId: this.busInfo.shiftsId, // 班次id

						})
					}
					// pickupList.push({
					// 	transferType: item.serviceType == 'in' ? 0 : 1, // 接送类型
					// 	schedulingId: this.busInfo.schedulingId, // 班次时间查询id
					// 	passengerId: item.id, // 乘车人id

					// 	stationName: item.destinationObj.stationName || item.destinationObj.address, // 站点名称
					// 	lat: item.destinationObj.lat || item.destinationObj.location.lat, // 纬度
					// 	lng: item.destinationObj.lng || item.destinationObj.location.lng, // 经度
					// 	address: item.destinationObj.addressName || item.destinationObj.address, // 站点地址
					// 	addressId: item.destinationObj.id, // 站点地址id

					// 	lineId: this.busInfo.lineId, // 线路ID

					// 	shiftsId: this.busInfo.shiftsId, // 班次id

					// })
				})
				/* **************单程接送人列表 E****************** */

				let updata = {
					goSchedulingId: schedulingId, //去程排班ID
					backSchedulingId: null, //返程排班ID
					phone: this.phone, //联系电话
					goInsurance: insuranceId_str, //去程保险ids
					backInsurance: null, //返程保险ids
					goServers: serviceId_str, //去程服务ids
					backServers: null, //返程服务ids
					goSeats: this.choosedSeatList.join(), //去程座位号ids
					backSeats: null, //返程座位号ids
					couponId: this.choosedBusCoupon.id, //优惠券ID
					rewardPoint: 0, //积分抵扣
					passengerIds: riderId_str, // 乘客列表ids
					goTransferList: pickupList, //单程接送
					backTransferList: null, //往返接送
					intentDriverId: this.curDriverObj.id || null, //意向司机ID
					goDriverId: this.busInfo.driverId, //单程司机ID
					backDriverId: null, //返程司机ID
					passengerList: this.riderPersionList, //乘客列表
					frontTotal: this.totalMoney, // 前端计算的总金额
					goShiftsCartype: this.busInfo.shiftsCartype, // 单程车型与班次ID 拼接字段;
					backShiftsCartype: null, // 往返车型与班次ID 拼接字段;
					remark: this.remark, // 备注
					shopId, // 商家id
					isFp: this.isFp,
				}
				this.textareaShow = false
				const _this = this
				// #ifdef MP-WEIXIN
				uni.requestSubscribeMessage({
					tmplIds: ['p08IN_BfeNZu8QEIasbY-BrW-sgyEX1z-4mW3BPE7P0'],
					success(res) {
						_this.submitWxNotifyConfirm('p08IN_BfeNZu8QEIasbY-BrW-sgyEX1z-4mW3BPE7P0', res['p08IN_BfeNZu8QEIasbY-BrW-sgyEX1z-4mW3BPE7P0'])
						// #endif
						uni.showLoading({
							title: '提交中...',
							mask: true  
						})
						_this.$http.post(_this.$api.submitBusOrder, updata).then(respon => {
							uni.hideLoading()
							if (respon.code === 200) {
								// _this.riderPersionList.forEach(item => { // 循环判断乘车人信息是都完整（此处有待优化）
								// 	_this.$http.get(_this.$api.checkRiderInfo + '?id=' + item.id + '&scene=0&schedulingId='+ _this.busInfo.schedulingId).then(res => {
								// 		if (res.code === 2020) { // 判断当前所选乘客信息是否完整 （2020不完整|200完整）
								// 			_this.curRiderPersonInfo = item
								// 			_this.handleChooseHistoryRider(_this.curRiderPersonInfo)
								// 		} else {
								// 			_this.$refs.commonPay.show()
								// 			_this.isTijiao = false
								// 			_this.orderNo = respon.data.orderNo
								// 		}
								// 	})
								// })
								_this.$refs.commonPay.show()
								_this.isTijiao = false
								_this.orderNo = respon.data.orderNo
							}
						})
						// #ifdef MP-WEIXIN
					},
					fail(res) {
						console.log('失败111',res);
					}
				})
				// #endif

			},
			// 取消支付
			noPay() {
				uni.reLaunch({
					// url: '/pagesUser/order/bus.orderList'
					url: '/pagesUser/order/bus.orderDetail?toAndFor=false&status=0&hideBtn=false&id=' + this
						.orderNo
				});
			},
			// 支付成功
			payMoney(pwd) {
				this.$http.post(this.$api.busOrderPayMoney, {
					orderNo: this.orderNo,
					payWord: pwd
				}).then(res => {
					if (res.code === 200) { // 密码正确，支付成功
						// this.$refs.commonPay.closeKeyBoard()
						this.$refs.commonPay.finishCloseKeyBoard()
						uni.showToast({
							title: '支付成功'
						})
						uni.reLaunch({
							url: './success.order?id=' + this.orderNo + '&type=bus&toAndFor=false'
						});
					} else if (res.code == 2012) {
						// uni.navigateTo({
						// 	url: '/pagesUser/editPayPwd?type=0'
						// });
					}
				})
			},
			// 完善航班提示隐藏
			hide() {
				this.$refs.modalBox.close()
			},
			// 去完善
			handleConfirm() {
				this.handleGoBusAddRider(this.curRiderPersonInfo)
			},
			getPickuperList() { // 获取接送人列表
				let arrUse = []
				arrUse = JSON.parse(JSON.stringify(this.$store.getters.getPickuperList))
				arrUse.forEach((item, index) => {
					if (!item.in.destination && !item.out.destination) {
						arrUse.splice(index, 1)
					}
				})
				this.$store.commit('upPickuperList', arrUse)
				this.pickupPersonList = arrUse
			},
			getRiderHistoryList() { // onshow 获取乘客完整信息
				this.$http.get(this.$api.getRiderList + '?type=1&scene=0&shiftsId=' + this.busInfo.shiftsId).then(res => {
					if (res.code === 200) {
						// this.riderPersionList = [{id:1,name:'金小鱼',type:'成人',ID:'410235649978531563', choosed: false}]
						res.data.result.map(item => {
							item.ID = item.idNumber
							item.choosed = false
						})
						this.riderPersionListHistory = res.data.result
					}
				})
			},

			initRiderList() { // 清空列表
				this.$store.commit('delRiderList')
				this.$store.commit('delPickuperList')
				this.$store.commit('delChoosedDriverObj')
				this.$store.commit('delSeatList')
				// this.$store.commit('delChoosedBusCoupon')
			},
			getCurDriverObj() {
				this.curDriverObj = this.$store.getters.getChoosedDriverObj
			},
			getChoosedSeatList() {
				this.choosedSeatList = this.$store.getters.getSeatList
			},
			// 获取订单页面保险,服务等列表展示 
			getServiceList() {
				this.$http.get(this.$api.getServiceList + '?goId=' + this.busInfo.schedulingId).then(res => {
					if (res.code === 200) {
						this.serviceList = res.data.goServer
						this.serviceList.map(item => {
							item.choosed = false
						})
						this.insuranceList = res.data.goInsurance
						this.insuranceList.map(item => {
							item.choosed = true
						})
						this.noticeList = res.data.textDescription
						this.integral = res.data.jifen
						this.exchangeRate = res.data.rate
						this.seatTotalNum = res.data.goSeats
						this.phone = res.data.userPhone
						this.isUseCoupon = res.data.isUseCoupon
						if (this.isUseCoupon == 0) { // 是否需要优惠券 0.使用 1.不适用
							this.getBusCouponList() // 公用优惠券选择列表
						}
						this.goIsCheckSeat = res.data.goIsCheckSeat
						this.goIsPickUp = res.data.goIsPickUp
						// this.backIsCheckSeat = res.data.backIsCheckSeat
						// this.backIsPickUp = res.data.backIsPickUp
						this.goPickUpTypeStart = res.data.goPickUpTypeStart
						this.goPickUpTypeEnd = res.data.goPickUpTypeEnd
						// this.backPickUpTypeStart = res.data.backPickUpTypeStart
						// this.backPickUpTypeEnd = res.data.backPickUpTypeEnd
					}
				})
			},
			getChoosedBusCoupon() { // 获取选择的班车优惠券
				this.choosedBusCoupon = this.$store.getters.getChoosedBusCoupon
			},
			initChoosedBusCoupon() {
				this.$store.commit('delChoosedBusCoupon')
			},
			// 获取班车优惠券列表
			getBusCouponList() {
				this.$http.get(this.$api.getCouponList + '?type=1&shopId=' + this.busInfo.shopId + '&totalPrice=' + this
					.originalPrice).then(res => {
					if (res.code === 200) {
						this.couponList = res.data
						if (!res.data.length) {
							this.$store.commit('delChoosedBusCoupon')
							return
						}
						let {
							fullAmount,
							amount
						} = this.choosedBusCoupon
						if (this.choosedBusCoupon.useScene == 1) { // 判断是否属于满减
							if (Number(this.originalPrice) < Number(fullAmount)) {
								this.$store.commit('delChoosedBusCoupon')
							}
						} else if (this.choosedBusCoupon.useScene == 0) {
							if (Number(this.originalPrice) < Number(amount)) {
								this.$store.commit('delChoosedBusCoupon')
							}
						}
						this.getChoosedBusCoupon()
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		padding-top: 270rpx;

		/deep/.input-placeholder {
			font-size: 30rpx;
			font-weight: normal;
			color: #ccc;
		}
	}

	.bus_info-wrap {
		height: 250rpx;
		background: #f5f5f5;
		position: fixed;
		/* #ifdef MP-WEIXIN */
		top: 0;
		/* #endif */
		/* #ifdef H5 */
		top: 88rpx;
		/* #endif */
		left: 0;
		right: 0;
		z-index: 9;

		.top-dack {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 90rpx;
			background-color: $blue;
			z-index: -1;
		}

		.bus_info {
			position: absolute;
			top: 20rpx;
			left: 0;
			right: 0;
			height: 250rpx;
			background: #fff;
			border-radius: 12rpx;
			padding: 40rpx;
			box-sizing: border-box;
			z-index: 9;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			overflow: hidden;

			.info_top-wrap {
				display: flex;
				align-items: center;
				font-size: 26rpx;
				justify-content: space-between;

				.price {
					font-size: 24rpx;
					color: $red;
					padding-right: 44rpx;
				}
			}

			.info_content-wrap {
				display: flex;
				flex: 1;
				justify-content: space-between;
				padding-top: 20rpx;

				.from,
				.to {
					display: flex;
					flex-direction: column;
					// justify-content: space-between;
					line-height: 1;

					.time {
						font-size: 48rpx;
						font-weight: bold;
					}

					.address {
						font-size: 32rpx;
						line-height: 42rpx;
						width: 202rpx;
					}
				}

				.to {
					text-align: right;
				}

				.bus_type-wrap {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					font-size: 24rpx;
					color: #666;

					.dack {
						width: 170rpx;
						background-color: #ccc;
						height: 6rpx;
						position: relative;

						&::before {
							content: '';
							position: absolute;
							width: 35rpx;
							height: 6rpx;
							top: -11rpx;
							right: -7rpx;
							background-color: #ccc;
							transform: rotate(45deg);
						}
					}
				}
			}
		}
	}

	.common-wrap {
		border-radius: 12rpx;
		background-color: #fff;
		padding: 0 30rpx;
		box-sizing: border-box;
		margin-top: 20rpx;

		.input-wrap {
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #ebebeb;
			font-size: 30rpx;

			&:last-child {
				border: none;
			}

			.l-wrap {
				display: flex;
				align-items: center;

				.icon {
					display: inline-block;
					height: 30rpx;
					width: 30rpx;
					margin-right: 20rpx;
				}

				.terms {
					color: $blue;
				}
			}

			.ul_service {
				display: flex;

				.li_service {
					display: flex;
					align-items: center;
					font-size: 30rpx;
					margin-left: 80rpx;

					.txt {
						margin-left: 20rpx;
					}
				}
			}

			.type {
				font-size: 30rpx;
			}

			.input {
				flex: 1;
				text-align: right;
				font-size: 30rpx;
				display: flex;

				input {
					padding-right: 6rpx;
				}
			}
		}
	}

	.content-wrap {
		margin-top: 20rpx;

		.rider_info-wrap {
			width: 690rpx;
			background: #fff;
			border-radius: 12rpx;
			padding: 30rpx 30rpx 40rpx;
			box-sizing: border-box;

			.common_tit-wrap {
				box-sizing: border-box;

				.l-wrap {
					font-size: 28rpx;
					font-weight: 500;
				}
			}

			.rider_list_history {
				display: flex;
				// flex-wrap: wrap;
				overflow-x: auto;

				.rider_item_history {
					padding: 19rpx 24rpx;
					border-radius: 8rpx;
					border: 1px solid #ebebeb;
					font-size: 28rpx;
					margin-right: 20rpx;
					margin-top: 26rpx;
					white-space: nowrap;
				}
			}

			.rider_list {
				.rider_item {
					height: 100rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1px solid #ebebeb;

					.l-wrap {
						display: flex;
						align-items: center;
						font-size: 28rpx;

						.name {
							font-size: 30rpx;
							padding: 0 10rpx 0 20rpx;
							width: 116rpx;
						}

						.type {
							padding-right: 40rpx;
						}
					}
				}
			}

			.pickuper_list {
				.pickuper_item {
					height: 152rpx;
					display: flex;
					align-items: center;
					justify-content: space-evenly;
					border-bottom: 1px solid #ebebeb;
					flex-direction: column;

					.t-wrap {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.name {
							font-size: 30rpx;
							font-weight: bold;
						}
					}

					.b-wrap {
						width: 100%;
						// display: flex;
						// justify-content: space-between;
						// align-items: center;
						outline-offset: 28rpx;
					}
				}
			}

			.common-btn {
				width: 520rpx;
				margin-top: 40rpx;
				display: flex;
				align-items: center;
				justify-content: space-evenly;

				.common-btn-con {
					display: flex;
					align-items: center;

					.txt {
						margin-left: 20rpx;
					}
				}
			}
		}
	}

	.buy_description {
		position: relative;
		font-size: 28rpx;
		padding: 30rpx 0 147rpx 50rpx;
		box-sizing: border-box;
		line-height: 50rpx;

		.icon {
			display: inline-block;
			height: 30rpx;
			width: 30rpx;
			margin-right: 20rpx;
			position: absolute;
			top: 36rpx;
			left: 0;
		}

		.terms {
			color: $blue;
		}
	}

	.submit-btn {
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		background-color: #fff;
		height: 98rpx;
		font-size: 26rpx;
		color: #666;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2;

		.price-wrap {
			flex: 1;
			display: flex;
			align-items: center;

			.price {
				color: $red;
				font-size: 36rpx;
				margin-left: 24rpx;
			}
		}

		.r-wrap {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.detail-btn {
				display: flex;
				align-items: center;
			}

			.arrow-icon {
				margin: 0 40rpx 0 16rpx;
			}

			.btn {
				width: 240rpx;
				height: 72rpx;
				line-height: 72rpx;
				background: $yellow;
				border-radius: 12rpx;
				color: #fff;
				text-align: center;
				font-size: 32rpx;
			}
		}
	}

	.popup-wrap {
		.popop_content {
			background-color: #fff;
			border-top-left-radius: 12rpx;
			border-top-right-radius: 12rpx;
			padding: 20rpx 30rpx 98rpx;

			.ul {
				.li {
					height: 98rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1px solid #EBEBEB;
					font-size: 26rpx;

					&:last-child {
						border: none;
					}

					.r-wrap {
						.price {
							margin-right: 50rpx;
						}

						.num {
							margin-right: 30rpx;
						}
					}
				}
			}
		}

		.submit-btn {
			border-top: 1px solid #EBEBEB;
		}
	}

	.common-btn {
		box-shadow: none;
	}

	.modal_box-wrap {
		background-color: #fff;
		width: 582rpx;
		border-radius: 20rpx;
		padding: 80rpx 60rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		box-sizing: border-box;
		position: relative;

		.alert-icon {
			width: 136rpx;
			height: 76rpx;
		}

		.p {
			padding: 40rpx 0 60rpx;
			font-size: 30rpx;
			text-align: center;
			line-height: 50rpx;
		}

		.btns-wrap {
			width: 100%;
			display: flex;
			justify-content: space-between;

			.btn {
				width: 218rpx;
				height: 73rpx;
				line-height: 73rpx;
				text-align: center;
				border-radius: 37px;
				font-size: 28rpx;

				&.cancel {
					border: 1px solid #ccc;
					color: #ccc;
				}

				&.confirm {
					background-color: $blue;
					color: #fff;
				}
			}
		}

		.close-icon {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
			z-index: 2;
		}
	}

	.InputFocus {
		box-shadow: 0 2rpx 12rpx 0 rgba(242, 58, 58, 0.3);
	}
</style>
